<!--
 * @Author: dongdong.wu
 * @Date: 2021-02-08 17:12:13
 * @Description: 查询条件的顶部，根据内部内容，进行动态计算按钮和查询条件的排列和折叠
 * 其中按钮级别占用6.注意分割
-->
<template>
  <div class="ele-header_search">
    <!-- 有条件需要折叠，第一行展示的 -->
    <div class="ele-header_search--collapse">
      <el-card class="card-top">
        <el-row ref="collapse">
          <!-- 不折叠的第一行 -->
          <slot name="collapse"></slot>
          <el-col class="ele-header-search_btn_span" :span="btnSpan">
            <!-- <slot name="btns"></slot> -->
            <!-- member-manager-list-register -->
            <div
              @click="onCollapse"
              v-if="$slots.row"
              class="ele-header_search--collapse--btn--more"
            >
              <span>{{ collapseTitle }}</span>
              <i
                class="el-icon-arrow-right"
                :class="{ 'el-icon-arrow-left': isCollapse }"
              ></i>
            </div>
            <el-button
              type="default"
              v-if="search && $hasPerm(searchPerm)"
              @keyup.enter.native="handleSearch"
              @click="handleSearch"
              >查 询</el-button
            >
          </el-col>
        </el-row>
      </el-card>
      <el-card class="btn-list" v-if="create || $slots['btns', 'btn']">
        <el-button
          type="primary"
          v-if="create && $hasPerm(createPerm)"
          @click="handleCreate"
        >
          {{ createTitle }}
          <span v-if="subTitle">
            (
            <span style="color: red">{{ subTitle }}</span>
            )
          </span>
        </el-button>
        <slot name="btns"></slot>
        <slot name="btn"></slot>
      </el-card>

      <!-- 展开多行的 -->
      <div v-show="isCollapse">
        <el-drawer
          class="drawer"
          title=""
          :visible.sync="isCollapse"
          :with-header="false"
        >
          <el-row>
            <slot name="row"></slot>
          </el-row>
          <div class="drawer-btn">
            <el-button
              v-if="search && $hasPerm(searchPerm)"
              @keyup.enter.native="handleSearch"
              @click="handleSearch"
              >查 询</el-button
            >
            <el-button
              type="danger"
              v-if="search && $hasPerm(searchPerm)"
              @click="clear"
              >清 空</el-button
            >
          </div>
        </el-drawer>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "HeaderSearch",
  props: {
    query: {
      type: Object,
      default() {
        return {
          page: 1,
          rows: 15
        };
      }
    },
    createTitle: {
      type: String,
      default: "新增"
    },
    subTitle: {
      type: String,
      default: ""
    },
    search: {
      type: Boolean,
      default: true
    },
    registerBtn: {
      type: Boolean,
      default: false
    },
    create: {
      type: Boolean,
      default: false
    },
    // 默认的查询权限标识
    searchPerm: String,
    // 默认的新增权限标识
    createPerm: String
  },
  data() {
    return {
      isCollapse: false,
      collapseSpan: 0
    };
  },
  created() {
    document.onkeydown = e => {
      let key = window.event.keyCode;
      if (key == 13) {
        this.$emit("search");
      }
    };
  },
  computed: {
    // ...mapGetters(["userInfo", "userCurrentPlat"]),
    collapseTitle() {
      return this.isCollapse ? "收起" : "更多";
    },
    btnSpan() {
      if (this.collapseSpan >= 24) {
        // 对于响应式布局。其查询条件最多23，而不能大约24
        throw new Error("collapse内span之和必须小于等于24");
      } else {
        return 24 - this.collapseSpan;
      }
    }
  },
  mounted() {
    this.addBtnSpanListener();
  },
  methods: {
    clear() {
      this.$parent.query = this.query
      // this.$emit("clear");
    },
    toRegister() {
      // console.log(this.userCurrentPlat);
      // console.log(process.env.VUE_APP_BASE_IS_API + "registerTwo");
      // window.open(this.userCurrentPlat.customerUrl + "/customer/#/registerTwo");
      let routeData = this.$router.resolve({
        path: "/member-manager-register"
      });
      window.open(routeData.href, "_blank");
    },
    // 清空tag
    closeAllTag() {
      this.$store.dispatch("tags/delAllViews");
    },
    // 动态计算btn所占据的宽度
    addBtnSpanListener() {
      const collapseHtmlCollection = this.$refs.collapse.$el.children;
      Array.from(collapseHtmlCollection).forEach(e => {
        const classList = e.classList;
        if (!classList.contains("ele-header-search_btn_span")) {
          // 条件部分
          const layoutSpan = classList[classList.length - 1].split("-")[2];
          this.collapseSpan += Number(layoutSpan);
        }
      });
    },
    onCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    handleSearch() {
      this.$emit("search");
      this.isCollapse = false;
    },
    handleCreate() {
      this.$emit("create");
    },
    handleCustom() {
      this.$emit("custom");
    }
  }
};
</script>
<style lang="scss" scoped>
.ele-header_search {
  background-color: #ffffff;
  padding: 5px 0px 5px 0px;

  .ele-header_search--collapse--btn--more {
    display: inline;
    margin-right: 10px;
    font-size: 13px;
    color: #409eff;
    font-weight: 600;

    &:hover {
      cursor: pointer;
      color: var(--component-color);
    }

    .el-icon-arrow-down {
      transition: 0.3s;
    }

    .el-icon-arrow-up {
      transition: 0.3s;
      transform: rotate(180deg);
    }
  }
  .card-top {
    ::v-deep.el-card__body {
      padding: 10px 20px;
    }
  }
  .customer-btn {
    font-size: 0px;
    margin-left: 10px;
  }

  .el-row {
    flex-wrap: wrap;
    display: flex;
  }

  ::v-deep.el-col {
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  ::v-deep.el-card__body {
      padding: 5px 10px 5px 20px;
  }
  .btn-list {
    text-align: left;
    margin: 2px 0 2px 0;

  }
  .drawer {
    .el-drawer__body {
      padding: 10px;
    }
    // position: relative;
    .drawer-btn {
      width: 100%;
      position: absolute;
      bottom: 20px;
      text-align: center;
    }
  }
}
</style>
